import React from "react";
import { Layout } from "antd";
import Dropdown from "@/components/header/Dropdown";
import Search from "@/components/header/Search";
import SiderMenu from "@/components/sider-menu/";
import { Outlet } from "react-router-dom";
import { observer } from "mobx-react";
import mobxData from "@/store/mobx-data";
import "@/App.css";

const { Header, Content, Sider } = Layout;

const App: React.FC = () => {
  return (
    <Layout className="app-layout">
      <Header className="app-header">
        <div className="app-logo">
          <img height="36" src={require("@/logo.png")} />
        </div>

        <div className="search">
          <Search />
        </div>
        <Dropdown />
      </Header>
      <Layout className="app-wrapper">
        <Sider width={mobxData.width} className="app-sider">
          <SiderMenu />
        </Sider>
        <Layout className="app-wrapper-in">
          <Content className="app-content">
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default observer(App);
